<template>
  <div class="menu_wrap_box" @click.stop="() => { }">
    <div class="menu_wrap_null"></div>
    <div class="menu_wrap" :class="{ open_menu_wrap: hoverStatus }">
      <!-- 主菜单 -->
      <!-- @mouseenter="mouseenter" @mouseleave="mouseleave" -->
      <div class="menu_wrap_list">
        <div v-for="(item, i) in menuList" :key="i" class="menu_wrap_item" @mouseenter="itemGameMove(item)"
          :class="[venueActive == item.id && 'active_item', 'menu_wrap_item' + item.id]" @click="itemClick(item)">
          <Imgt :src="item.icon" />
          <span>{{ t(item.label) }}</span>
          <div :class="venueActive == item.id && 'active_item_bg'"></div>
        </div>

        <div v-for="(item, i) in homeGameData" :key="i" class="menu_wrap_item" @click="itemGameClick(item)"
          :class="venueActive == item.id && 'active_item'" @mouseenter="itemGameMove(item)">
          <Imgt :src="settings.backend_upload + item.icon_pc" />
          <!-- <Imgt :src="`/img/menu/${item.id}.webp`" /> -->
          <span>{{ item.name[langObj[lang]] }}</span>
          <div :class="venueActive == item.id && 'active_item_bg'"></div>
        </div>
        <div class="menu_wrap_list_ban">
          <!-- <Imgt src="/img/menu/ban.webp" /> -->
        </div>
      </div>
      <!-- 活动/vip/商城 -->
      <div class="menu_wrap_other">
        <div @click="clickItem(6, '/wallet/activity')">
          <Imgt src="/img/menu/menu_10.webp" />
          <span>{{ t('page_route_activity') }}</span>
        </div>
        <div @click="clickItem(3, '/wallet/levelInfo')">
          <Imgt src="/img/menu/menu_11.webp" />
          <span>{{ t('page_route_VIP') }}</span>
        </div>
        <div @click="Message.warning('敬请期待！')">
          <Imgt src="/img/menu/menu_12.webp" />
          <span>{{ t('home_page_mall') }}</span>
        </div>
      </div>

      <!-- 下拉菜单 -->
      <div class="sub_menu" :class="{ show_sub_menu: hoverStatus }" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <!-- 一级分类 -->
        <div class="sub_menu_0 sub_menu_scroll sub_menu_1">
          <template v-if="hoverStatus">
            <div :class="venueActive == item.id && 'active_1_item'" class="menu_1_item"
              v-for="(item, i) in menuList.filter((item) => item.id != -1)" :key="'a' + i" @click="itemClick(item)">
              <Imgt class="icon" :src="item.icon" />
              <span class="name">{{ t(item.label) }}</span>
              <Imgt class="more more1" :src="`/img/menu/menu_more.webp`" />
              <Imgt class="more more2" :src="`/img/menu/menu_more2.webp`" />
            </div>
            <div :class="venueActive == item.id && 'active_1_item'" class="menu_1_item"
              v-for="(item, i) in homeGameData" :key="'b' + i" @mouseenter="itemGameMove(item)">
              <Imgt class="icon" :src="settings.backend_upload + item.icon_pc" />
              <span class="name">{{ unserialize(item.name, false) }}</span>
              <Imgt class="more more1" :src="`/img/menu/menu_more.webp`" />
              <Imgt class="more more2" :src="`/img/menu/menu_more2.webp`" />
            </div>
          </template>
        </div>

        <!-- -------------- 二级 --------------- -->

        <!-- 俱乐部 -->
        <div class="sub_menu_0 sub_menu_2" v-if="currType.id == 99">
          <template v-if="hoverStatus">
            <!-- 标题 -->
            <div class="sub_menu_2_title">
              <Imgt class="sub_menu_2_icon" :src="`/img/menu/menu_hot.webp`" />
              <span>{{ t('home_menu_hot_club') }}</span>
              <div style="flex: 1"></div>
              <div class="sub_menu_2_btn" @click="jump('club')">{{ t('home_page_more') }}</div>
              <div class="sub_menu_2_btn" @click="prevScroll(scrollJL2)">&lt;</div>
              <div class="sub_menu_2_btn" @click="nextScroll(scrollJL2)">&gt;</div>
            </div>
            <!-- 俱乐部列表 -->
            <div class="sub_menu_scroll sub_menu_2_child" ref="scrollJL2">
              <div class="sub_menu_2_ss" :class="{ sub_menu_2_ssed: i == 2 }" v-for="i in 10" :key="i">
                <div class="sub_menu_2_ss_icon">
                  <Imgt style="width: 100%; height: 100%" :src="`/img/menu/ss.webp`" />
                  <!-- 创建者 -->
                  <div class="sub_menu_2_ss_creater">创建者</div>
                </div>
                <div class="sub_menu_2_ss_content">
                  <div class="sub_menu_2_ss_title">俱乐部名称</div>
                  <div class="sub_menu_2_ss_info">
                    <div>
                      俱乐部简介俱乐部简介俱乐部简介俱乐部简介俱乐部简介俱乐部简介
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>

        <!-- 赛程 -->
        <div class="sub_menu_0 sub_menu_2" v-if="currType.id == 100">
          <template v-if="hoverStatus">
            <!-- 标题 -->
            <div class="sub_menu_2_title">
              <Imgt class="sub_menu_2_icon" :src="`/img/menu/menu_hot.webp`" />
              <span>{{ t('home_menu_hot_game') }}</span>
              <div style="flex: 1"></div>
              <div class="sub_menu_2_btn" @click="jump('ranking')">{{ t('home_page_more') }}</div>
              <div class="sub_menu_2_btn" @click="prevScroll(scrollSS2)">&lt;</div>
              <div class="sub_menu_2_btn" @click="nextScroll(scrollSS2)">&gt;</div>
            </div>
            <!-- 赛事列表 -->
            <div class="sub_menu_scroll sub_menu_2_child" ref="scrollSS2">
              <div class="sub_menu_2_ss" :class="{ sub_menu_2_ssed: i == 2 }" v-for="i in 10" :key="i">
                <div class="sub_menu_2_ss_icon">
                  <Imgt style="width: 100%; height: 100%" :src="`/img/menu/ss.webp`" />
                </div>
                <div class="sub_menu_2_ss_content">
                  <div class="sub_menu_2_ss_title">德州比赛-多人奖金赛</div>
                  <div class="sub_menu_2_ss_info">
                    <iconpark-icon name="paihiconss01"></iconpark-icon>
                    <div class="sub_menu_2_ss_text">报名人数：62</div>
                  </div>
                  <div class="sub_menu_2_ss_info">
                    <iconpark-icon name="zuijin"></iconpark-icon>
                    <div class="sub_menu_2_ss_text">{{ t('home_menu_game_start') }}：2024-07-01 12:30:00</div>
                  </div>
                  <div class="sub_menu_2_ss_info">
                    <iconpark-icon name="zuijin"></iconpark-icon>
                    <div class="sub_menu_2_ss_text">{{ t('home_menu_game_end') }}：2024-07-01 12:30:00</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>

        <!-- 游戏平台 -->
        <div class="sub_menu_0 sub_menu_2" v-if="currType.id != 100 && currType.id != 99">
          <template v-if="hoverStatus">
            <!-- 标题 -->
            <div class="sub_menu_2_title">
              <Imgt class="sub_menu_2_icon" :src="`/img/menu/sub_menu_icon.webp`" />
              <span>{{ t('home_menu_game_plat') }}</span>
            </div>
            <!-- 平台 -->
            <div class="sub_menu_scroll sub_menu_2_child">
              <div class="sub_menu_2_item" v-for="(v, i) in platformData" :key="i" @click="clickPlat(v)">
                <div class="sub_menu_2_box">
                  <img class="sub_menu_2_img" :src="getImg(v.picture_pc)" alt="img" />
                </div>
                <div class="sub_menu_2_name" :style="{'font-weight': currPlat.id == v.id ? '600' : '500'}">{{ unserialize(v.name, false) }}</div>
              </div>
              <div class="sub_menu_2_item"></div>
            </div>
          </template>
        </div>

        <!-- ------------- 三级 ---------------- -->

        <!-- 俱乐部列表 -->
        <div class="sub_menu_0 sub_menu_3" v-if="currType.id == 99">
          <!-- 所有俱乐部 -->
          <template v-if="hoverStatus">
            <div class="sub_menu_3_item" style="display: flex; flex-direction: column; height: 100%">
              <!-- 操作 -->
              <div class="sub_menu_3_title">
                <Imgt class="sub_menu_3_title_icon" :src="`/img/menu/game_icon.webp`" />
                <div class="sub_menu_3_subtitle">{{ t('home_menu_club_game') }}</div>
                <div style="flex: 1"></div>
                <div class="sub_menu_3_btn" @click="jump('clubNext')">{{ t('home_page_more') }}</div>
                <div class="sub_menu_3_btn" @click="prevScroll(scrollJL3)">&lt;</div>
                <div class="sub_menu_3_btn" @click="nextScroll(scrollJL3)">&gt;</div>
              </div>

              <!-- 列表 -->
              <div class="sub_menu_scroll sub_menu_3_list sub_menu_3_list2" ref="scrollJL3">
                <div class="sub_menu_3_jl" v-for="i in 20" :key="i">
                  <div class="sub_menu_3_jl_icon">
                    <Imgt style="width: 100%; height: 100%" :src="`/img/menu/ss.webp`" />
                  </div>
                  <div class="sub_menu_3_jl_content">
                    <div class="sub_menu_3_jl_title">经典德州扑克-1860</div>
                    <div class="sub_menu_3_jl_infos">
                      <div class="sub_menu_3_jl_info">
                        <iconpark-icon name="paihiconss01" class="sub_menu_3_jl_ticon"></iconpark-icon>
                        <div class="sub_menu_3_jl_text">3/8</div>
                      </div>
                      <div class="sub_menu_3_jl_info">
                        <iconpark-icon name="txxlicon10" class="sub_menu_3_jl_ticon"></iconpark-icon>
                        <div class="sub_menu_3_jl_text">25$</div>
                      </div>
                      <div class="sub_menu_3_jl_info">
                        <iconpark-icon name="txxlicon02" class="sub_menu_3_jl_ticon"></iconpark-icon>
                        <div class="sub_menu_3_jl_text">0.25/0.6</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>

        <!-- 赛事简介 -->
        <div class="sub_menu_0 sub_menu_3" v-if="currType.id == 100">
          <!-- 所有赛事 -->
          <template v-if="hoverStatus">
            <div class="sub_menu_3_ss">
              <div class="sub_menu_3_ss_title">
                <Imgt class="sub_menu_3_title_icon" :src="`/img/menu/ss_icon_1.webp`" />
                <div>赛事简介</div>
              </div>
              <div class="sub_menu_3_ss_block">
                欢迎参加本年度最激动人心的德州扑克锦标赛！无论您是经验丰富的扑克高手，还是刚刚入门的新手，这场比赛都将为您提供一个展示技巧和策略的绝佳平台。
              </div>
              <div class="sub_menu_3_ss_title">
                <Imgt class="sub_menu_3_title_icon" :src="`/img/menu/ss_icon_2.webp`" />
                <div>比赛详情</div>
              </div>
              <div class="sub_menu_3_ss_block">
                •  日期：2024年7月20日 <br />
                •  时间：下午2:00开始 <br />
                •  比赛人数：9-2000人 <br />
                •  起始筹码：₱5,000
              </div>
              <div class="sub_menu_3_ss_title">
                <Imgt class="sub_menu_3_title_icon" :src="`/img/menu/ss_icon_3.webp`" />
                <div>比赛规则</div>
              </div>
              <div class="sub_menu_3_ss_block">
                •  比赛采用德州扑克无限注规则。 <br />
                •  每位参赛者将获得相同数量的筹码。 <br />
                •  比赛将持续到最后一名选手被淘汰，冠军将获得丰厚奖金和奖杯。
              </div>
              <div class="sub_menu_3_ss_title">
                <Imgt class="sub_menu_3_title_icon" :src="`/img/menu/ss_icon_4.webp`" />
                <div>报名方式</div>
              </div>
              <div class="sub_menu_3_ss_block">
                请访问我们的网站或亲临俱乐部前台报名。名额有限，先到先得！
                准备好迎接挑战了吗？快来展示您的扑克技巧，赢取丰厚奖品吧！
              </div>

              <div class="sub_menu_3_ss_btn">查看详情</div>
            </div>
          </template>
        </div>

        <!-- 体育和真人的入口 -->
        <div v-if="isPlatIn(currType) && currType.id != 100 && currType.id != 99" class="sub_menu_0 sub_menu_3"
          style="padding: 0">
          <template v-if="hoverStatus">
            <div class="sub_menu_3_in" @click="clickPlatIn">
              <Imgt style="width: 100%; height: 100%; object-fit: cover" src="/img/menu/pi_bg.webp" />
              <div class="sub_menu_3_inbtn">{{ t('home_menu_game_play') }}</div>
            </div>
          </template>
        </div>

        <!-- 所有游戏列表 -->
        <div class="sub_menu_0 sub_menu_3" v-if="
          !isPlatIn(currType) && currType.id != 100 && currType.id != 99 && currPlat.id
        ">
          <!-- 所有游戏 -->
          <template v-if="hoverStatus">
            <div class="sub_menu_3_item" style="display: flex; flex-direction: column; height: 100%">
              <!-- 操作 -->
              <div class="sub_menu_3_title">
                <img class="sub_menu_3_title_icon" :src="getImg(currPlat.picture_pc)" alt="img" />
                <div style="flex: 1"></div>
                <div class="sub_menu_3_btn" @click="itemChildClick(currType, currPlat)">{{ t('home_page_more') }}</div>
                <div class="sub_menu_3_btn" @click="prevScroll(scrollAll3)">&lt;</div>
                <div class="sub_menu_3_btn" @click="nextScroll(scrollAll3)">&gt;</div>
              </div>

              <!-- 列表 -->
              <div class="sub_menu_scroll sub_menu_3_list sub_menu_3_list2" ref="scrollAll3">
                <NewMenuGameItem @click.native="onPlayGame(item)" v-for="(item, i) in games" :key="i"
                  :pic="getImg(item.gamePicturePC)" :name="unserialize(item.name, true)"
                  :ismMintain="item.ismMintain" />
              </div>
            </div>
          </template>
        </div>

        <!-- 一排一组游戏列表 -->
        <div class="sub_menu_0 sub_menu_scroll sub_menu_3" v-if="
          !isPlatIn(currType) && currType.id != 100 && currType.id != 99 && !currPlat.id
        ">
          <!-- 一排一组 -->
          <template v-if="hoverStatus">
            <div class="sub_menu_3_item" v-for="(plat, index) in platformData" :key="index">
              <!-- 操作 -->
              <div class="sub_menu_3_title" v-if="plat.children && plat.children.length">
                <img class="sub_menu_3_title_icon" :src="getImg(plat.picture_pc)" alt="img" />
                <div style="flex: 1"></div>
                <div class="sub_menu_3_btn" @click="itemChildClick(currType, plat)">{{ t('home_page_more') }}</div>
                <div class="sub_menu_3_btn" :style="{ opacity: plat._page == 1 ? '0.3' : 1 }" @click="prevPage(plat)">
                  &lt;
                </div>
                <div class="sub_menu_3_btn" :style="{ opacity: plat._page == plat._pages ? '0.3' : 1 }"
                  @click="nextPage(plat)">&gt;</div>
              </div>

              <!-- 游戏 -->
              <div class="sub_menu_3_list">
                <TransitionGroup :name="aniName">
                  <NewMenuGameItem @click.native="onPlayGame(game)" v-for="(game, i) in plat.children" :key="i"
                    :pic="getImg(game.gamePicturePC)" :name="unserialize(game.name, true)"
                    :ismMintain="game.ismMintain" />
                </TransitionGroup>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>

  <Loading v-model:visible="isLoading"></Loading>
</template>
<script setup lang="ts" name="Header">
import { ref, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { NetPacket } from "@/netBase/NetPacket";
import { NetMsgType } from "@/netBase/NetMsgType";
import pinia from "@/store/index";
import { Page } from "@/store/page";
import { Local } from '@/utils/storage';
import H5Websocket from "@/net/Net1";
import { User } from "@/store/user";
import { Message } from "@/utils/discreteApi";
import { useI18n } from "vue-i18n";
import NewMenuGameItem from "./NewMenuGameItem.vue"
import Loading from '@/components/Loading.vue'

const { t } = useI18n();
const userInfo = User(pinia);
const { homeGameData } = storeToRefs(Page(pinia));
const { hasLogin } = storeToRefs(userInfo);

const router = useRouter();
const route = useRoute();
// const route = useRoute();
const { venueActive, lang, settings } = storeToRefs(Page(pinia));


// 解析图片地址
const getImg = (name: any) => {
  if (!name) return "";
  return settings.value.backend_upload + name;
};
// 解析游戏名和平台名
const langObj: any = {
  en: "en-US",
  zh: "zh-CN",
  vn: "vi-VN",
};
const clickItem = async (i: number, url: string) => {
  if (!hasLogin.value) {
    await User(pinia).setLogin(true);
    return;
  }
  await Page(pinia).setMenuActive(i);
  router.push(url)
}
const unserialize = (v: any, isPlatform: boolean) => {
  if (!v) return "";
  let obj: any = {
    en: "en-US",
    zh: "zh-CN",
    vn: "vi-VN",
  };
  if (isPlatform) {
    v = JSON.parse(v);
  }
  return v[obj[lang.value]];
};
const menuList = [
  { label: "wallet_page_home", icon: "/img/menu/menu_1.webp", url: "/", id: -1 },
  {
    label: "home_page_club",
    icon: "/img/menu/menu_2.webp",
    url: "/club",
    name: "club",
    id: 99,
  },
  { label: "home_page_schedule", icon: "/img/menu/menu_3.webp", url: "", id: 100 },
  // { label: "棋牌", icon: "/img/menu/menu_4.webp", url: "", id: 4 },
  // { label: "电子", icon: "/img/menu/menu_5.webp", url: "", id: 5 },
  // { label: "真人", icon: "/img/menu/menu_6.webp", url: "", id: 6 },
  // { label: "捕鱼", icon: "/img/menu/menu_7.webp", url: "", id: 7 },
  // { label: "彩票", icon: "/img/menu/menu_8.webp", url: "", id: 8 },
  // { label: "电竞", icon: "/img/menu/menu_9.webp", url: "", id: 9 },
];

// 点击菜单
const currType: any = ref({});
const itemClick = async (item: any) => {
  // 临时逻辑-俱乐部和赛程 敬请期待
  if (item.id == 100) {
    return Message.warning('敬请期待！');
  }
  if (!hasLogin.value && item.id == 99) {
    await User(pinia).setLogin(true);
    return;
  }
  currType.value = item;
  currPlat.value = {};
  await Page(pinia).setVenueActive(item.id);
  router.push(`${item.url}`);

  if (venueActive.value == -1) {
    // 点击主页关闭下拉
    hoverStatus.value = false;
  }

  // 俱乐部
  if (item.id == 99) {
    getClubList()
  }
  // 赛程
  if (item.id == 100) {
    MessageEvent2.addMsgEvent(
      NetMsgType.msgType.msg_notify_tournament_events_list,
      handleGetList
    );
    const req = NetPacket.req_tournament_events_list();
    req.page = 1;
    H5Websocket.sendMessageHandler(req);
  }
};
const getClubList = () => {
  if (hasLogin.value) {
    MessageEvent2.addMsgEvent(
      NetMsgType.msgType.msg_notify_get_club_list,
      handleClubList
    );
    const req = NetPacket.req_get_club_list();
    H5Websocket.sendMessageHandler(req);
  }

}
const platformData = ref();
const itemGameClick = async (item: any) => {
  await Page(pinia).setVenueActive(item.id);
  console.error(item.id)
  if (![4].includes(item.id)) {
    // if (route.name != 'gameDetail') return
    router.push({
      path: "/gameDetail",
      query: {
        venue_id: item.id,
      },
    });
  }
}
const itemChildClick = (typeObj: any, platObj: any) => { // 跳转二级分类
  router.push({
    path: "/gameDetail",
    query: {
      venue_id: typeObj.id,
      agentId: platObj.id
    },
  });
  setTimeout(() => {
    hoverStatus.value = false;
  }, 300)
}

const itemGameMove = async (item: any) => {
  // 临时逻辑-俱乐部和赛程 敬请期待
  if (item.id == 100) {
    return;
  }
  hoverStatus.value = true;
  if (item.id == -1 || currType.value.id == item.id) return
  currType.value = item;
  currPlat.value = {};
  const target: any = homeGameData.value.find(
    (e: any) => e.id == Number(item.id)
  )
  if (target) {
    platformData.value = target.three_platform;
  }
  await Page(pinia).setVenueActive(item.id);



  setTimeout(() => {
    if (isPlatIn(item)) { // 如果是直接展示入口的就默认选择第一个
      clickPlat(platformData.value[0])
    }

    if (!isPlatIn(currType.value)) { // 如果不是直接展示入口的就要去获取所有游戏分类来展示
      platformData.value.forEach((item: any) => {
        item.children = []
      })
      // 先从缓存拿
      let arr: any = []
      try {
        arr = JSON.parse(sessionStorage.getItem('third_menu_' + currType.value.id) || '[]')
      } catch {
        arr = []
      }
      if (arr.length) {
        handleThirdList({ info: arr })
      }
      isLoading.value = true
      MessageEvent2.addMsgEvent(
        NetMsgType.msgType.msg_notify_get_games_by_kind,
        handleThirdList
      );
      const req = NetPacket.req_get_games_by_kind();
      req.page = 1;
      req.pageSize = 9999
      req.inner_size = 9999
      req.kindId = currType.value.id
      H5Websocket.sendMessageHandler(req);
    }
  }, 300);
};

// 三级菜单分类数据
const handleThirdList = (res: any) => {
  isLoading.value = false
  sessionStorage.setItem('third_menu_' + currType.value.id, JSON.stringify(res.info || []))
  if (res && res.info && res.info.length) {
    res.info.forEach((item: any) => {
      const plat = platformData.value.find((a: any) => a.id == item.agentId)
      if (plat) {
        if (plat.children) {
          plat.children.push(item)
        } else {
          plat.children = [item]
        }
        // 重置分页信息
        plat._page = 1
        plat._pages = Math.ceil(plat.children.length / 6) // 每页6个
      }
    })

    platformData.value.forEach((plat: any) => {
      if (plat.children) {
        // 填充至6的倍数
        const tail = 6 - ((plat.children.length % 6) || 6)
        for (let i = 0; i < tail; i++) {
          plat.children.push({ type: 'none' })
        }
      }
    })

  }
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_games_by_kind, null);
};

// 俱乐部
const handleClubList = async (res: any) => {
  // MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_club_list, null);
  await Page(pinia).setClubAllList(res);
};

// 赛程
const handleGetList = (res: any) => {
  console.error("赛程数据-->", res.tournm_list);
  MessageEvent2.removeMsgEvent(
    NetMsgType.msgType.msg_notify_tournament_events_list,
    null
  );
};

// 判断分类是否是视讯-体育(没有游戏列表，直接展示平台入口)
const isPlatIn = (types: any) => {
  return [3, 4].includes(types.id);
};

// 点击平台
const currPlat: any = ref({});
const clickPlat = (item: any) => {
  currPlat.value = item;
  // 体育和真人展示入口
  if (isPlatIn(currType.value)) {
    return;
  }

  // 点击的时候才监听
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_get_games_in_platform,
    handleGames
  );

  setTimeout(() => {
    games.value = [];
    const query = NetPacket.req_get_games_in_platform();
    console.log('下拉请求=》》》》》》》》');

    query.agentId = item.id;
    query.is_lable = 0;
    query.kindId = currType.value.id
    query.page = 1;
    query.pageSize = 9999;
    H5Websocket.sendMessageHandler(query);
  }, 100);
};
// 游戏列表
const games: any = ref([]);
const handleGames = (res: any) => {
  console.log('下拉框返回的游戏数据');

  games.value = res.info || [];


  //  收到后就移除监听
  MessageEvent2.removeMsgEvent(
    NetMsgType.msgType.msg_notify_get_games_in_platform,
    null
  );

};

// 主动触发分类选择
const handleClick = (id: any) => {
  const t: any = [...menuList, ...homeGameData.value].find((e: any) => e.id == id);
  if (t) {
    platformData.value = t.three_platform;
    if ([-1, 99, 100].includes(t.id)) {
      itemClick(t);
    } else {
      itemGameClick(t);
    }
  }
};



// 打开游戏
const isLoading = ref(false)
const onPlayGame = async (v: any) => {
  if (!Local.get('user')) {
    await User(pinia).setLogin(true)
    return
  }
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_3rd_game_login_result, gameUrlResult);
  let langObj: any = {
    'en': 3,
    'vi': 2,
    'zh': 1
  }
  isLoading.value = true
  let tb = NetPacket.req_3rd_game_login();
  tb.agentId = v.agentId || v.id;
  tb.kindId = currType.value.venue_id // state.kindId;
  tb.gameId = v.gameId;
  tb.lang = langObj[lang.value];
  tb.device_type = 1
  H5Websocket.sendMessageHandler(tb);
}
//  打开游戏
const gameUrlResult = (message: any) => {
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_3rd_game_login_result, null);
  isLoading.value = false
  if (message.code != 0) {
    Message.error(message.msg)
    return
  }
  if (message.url.indexOf('<!doctype html>') != -1) {
    const blob = new Blob([message.url], { type: 'text/html' });
    message.url = URL.createObjectURL(blob);
  }
  router.push({
    name: 'home'
  })
  setTimeout(() => {
    router.replace({
      path: "/openGame",
      query: {
        src: message.url
      }
    });
  }, 0)
}
// 体育视讯等直接进入平台游戏
const clickPlatIn = () => {

  console.error(currType.value, currPlat.value)
  onPlayGame(currPlat.value)
}


// 页面点击
const clickHandle = () => {
  hoverStatus.value = false
}

onMounted(async () => {
  // Local.get("venueActive")
  if (route.query.venue_id) {
    await Page(pinia).setVenueActive(Number(route.query.venue_id));
    handleClick(Number(route.query.venue_id));
  }

  document.body.addEventListener('click', clickHandle)
});
onUnmounted(() => {

  MessageEvent2.removeMsgEvent(
    NetMsgType.msgType.msg_notify_tournament_events_list,
    null
  );
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_club_list, null);
  // MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_games_by_kind, null);

  document.body.removeEventListener('click', clickHandle)
});

// 展开状态
const hoverStatus = ref(false);
const hovertimeout: any = ref(null);
const mouseleave = (e: any) => {
  if (e.toElement && e.toElement.className.includes('n-modal-mask')) return
  hoverStatus.value = false;
  setTimeout(() => {
    hoverStatus.value = false;
  }, 200);
};
const mouseenter = () => {
  if (venueActive.value == -1) return; // 悬停主页不下拉
  if (hovertimeout.value) clearTimeout(hovertimeout.value);
  hoverStatus.value = true;

  // 如果没有激活二级分类就触发下点击事件(俱乐部)
  if (hasLogin.value && !currType.value.id && 99 == venueActive.value) {
    itemClick(menuList[1]);
    return;
  }
  // if (!currPlat.value.id) {
  //   handleClick(venueActive.value)
  // }
};

// 滚动
const scrollSS2 = ref(); // 二级-赛事列表
const scrollJL2 = ref(); // 二级-俱乐部分类列表
const scrollAll3 = ref(); // 三级-所有游戏列表
const scrollJL3 = ref(); // 三级-俱乐部列表
const prevScroll = (dom: any) => {
  dom.scrollTo({
    top: dom.scrollTop - dom.clientHeight,
    behavior: "smooth",
  });
};
const nextScroll = (dom: any) => {
  dom.scrollTo({
    top: dom.scrollTop + dom.clientHeight,
    behavior: "smooth",
  });
};

// 游戏翻页
const aniName = ref("gamelist");
const nextPage = (plat: any) => {
  if (plat._page == plat._pages) return
  plat._page++
  aniName.value = "aniName";
  const cuts: any = [];
  for (let i = 0; i < 6; i++) {
    setTimeout(() => {
      const a: any = plat.children.shift();
      cuts.push(a);
    }, i * 50);
  }
  setTimeout(() => {
    plat.children.push(...cuts);
  }, 500);
};
const prevPage = (plat: any) => {
  if (plat._page == 1) return
  plat._page--
  aniName.value = "aniName2";
  for (let i = 0; i < 6; i++) {
    const a: any = plat.children.pop();
    setTimeout(() => {
      plat.children.unshift(a);
    }, i * 50);
  }
};

// 跳转
const jump = (name: any) => {
  router.push({
    path: "/" + name,
  });
};
</script>

<style lang="less" scoped>
@timestamp: `new Date() .getTime() `;

.gamelist-move,
.gamelist-enter-active,
.gamelist-leave-active {
  transition: all 0.3s ease;
}

.gamelist-enter-from {
  opacity: 0;
  transform: translateX(90px);
}

.gamelist-leave-to {
  opacity: 0;
  transform: translateX(-90px);
}

.gamelist2-move,
.gamelist2-enter-active,
.gamelist2-leave-active {
  transition: all 0.3s ease;
}

.gamelist2-enter-from {
  opacity: 0;
  transform: translateX(-90px);
}

.gamelist2-leave-to {
  opacity: 0;
  transform: translateX(90px);
}

.menu_wrap_box {
  position: relative;
  z-index: 1999;
  user-select: none;

  .menu_wrap_null {
    height: 133px;
  }
}

.menu_wrap {
  width: 100%;
  margin: 0 auto 17px;
  display: flex;
  flex-wrap: wrap;
  align-items: first baseline;
  position: absolute;
  top: 0;
  left: 0;
  height: 133px;
  transition: all ease 0.3s;
  transition-delay: 0s;
  background: url("/img/menu/menu_bg.webp?t=@{timestamp}") no-repeat;
  background-size: 100% 0;
  background-position-y: 124px;

  .sub_menu {
    width: 100%;
    transition: all ease 0.3s;
    height: 0;
    opacity: 0;
  }

  .show_sub_menu {
    height: calc(100% - 133px); // 794px
    opacity: 1;
    transition: all ease 0.3s;
  }

  .menu_wrap_list {
    // background: url('/img/menu/ban.webp?t=@{timestamp}') no-repeat;
    // background-size: 100% 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1060px;
    height: 133px;
    padding-right: 48px;

    :first-child {
      margin: 0 14px;
    }

    .menu_wrap_item {
      width: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      z-index: 100;
      cursor: pointer;
      position: relative;
      z-index: 100;

      span {
        display: block;
        margin-top: -4px;
        z-index: 100;
        white-space: nowrap;
      }

      img {
        width: 70px;
        z-index: 100;
      }

      .active_item_bg {
        width: 130px;
        height: 68px;
        z-index: 1;
        top: 30px;
        left: -27px;
        position: absolute;
        background: url("/img/menu/btn_bg.webp?t=@{timestamp}") no-repeat;
        background-size: 100% 100%;

        &:nth-child(1) {
          left: -10px;
        }
      }
    }
  }

  .menu_wrap_item-1 {
    width: 100px;
    margin-right: -4px;

    img {
      width: 100px;
    }
  }

  .active_item {
    z-index: 100;

    img {
      scale: 1.2;
      margin-bottom: 5px;
      margin-top: -5px;
    }

    .menu_wrap_list_ban {
      position: absolute;
      left: 0;
      top: 45px;
      z-index: 1;
      width: 1030px;
      height: 68px;
      border-radius: 16px;
      background: url("/img/menu/ban.webp?t=@{timestamp}") no-repeat;
      background-size: 100% 100%;
      transition: all ease 0.3s;
    }
  }

  .menu_wrap_other {
    position: absolute;
    right: 0;
    top: 2px;
    height: 133px;
    // margin-left: 40px;
    display: flex;
    align-items: center;
    gap: 10px;

    img {
      width: 88px;
      height: 82px;
    }

    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      margin-left: 20px;
    }
  }
}

.open_menu_wrap {
  // height: 927px;
  height: 75vh;
  min-height: 500px;
  background: url("/img/menu/menu_bg.webp?t=@{timestamp}") no-repeat;
  background-size: 100% calc(100% - 50px);
  background-position-y: 50px;
  // transition-delay: 50ms;

  .sub_menu {
    padding: 14px 20px 20px 14px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;

    .sub_menu_0 {
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      overflow-y: auto;
      height: 100%;
    }

    .sub_menu_scroll {
      &::-webkit-scrollbar {
        display: block;
        width: 6px;
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
        border-radius: 18px;
      }

      &::-webkit-scrollbar-thumb {
        background: #381b8b;
        border-radius: 10px;
      }
    }

    .sub_menu_1 {
      width: 244px;
      padding: 14px;

      .menu_1_item {
        height: 59px;
        margin-bottom: 37px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px 0 6px;
        cursor: pointer;

        &:last-child {
          margin-bottom: 0;
        }

        .icon {
          width: 58px;
          height: 58px;
        }

        .name {
          color: #9497a1;
          font-size: 18px;
        }

        .more {
          width: 15px;
          height: 26px;
        }

        .more1 {
          display: block;
        }

        .more2 {
          display: none;
        }
      }

      .active_1_item {
        background-image: linear-gradient(to right, #1c99ff, #9c1fff);
        border-radius: 8px;

        .name {
          color: #fff;
        }

        .more1 {
          display: none;
        }

        .more2 {
          display: block;
        }
      }
    }

    .sub_menu_2 {
      width: 368px;
      padding: 0 20px 20px 20px;
      display: flex;
      flex-direction: column;

      .sub_menu_2_title {
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: rgba(255, 255, 255, 0.6);
        font-size: 18px;

        .sub_menu_2_btn {
          margin-left: 6px;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          box-shadow: 0.3px 0.3px 0.6px 0px #4b4a6e inset;
          color: #fff;
          font-size: 13px;
          min-width: 24px;
          padding: 0 9px;
          background-color: #282747;
          cursor: pointer;
        }

        .sub_menu_2_icon {
          width: 22px;
          height: 22px;
          margin-right: 8px;
        }
      }

      .sub_menu_2_child {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
        align-content: flex-start;

        .sub_menu_2_ss {
          cursor: pointer;
          height: 110px;
          width: 100%;
          margin-bottom: 12px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px;
          background: linear-gradient(269deg,
              rgba(162, 86, 238, 0.52) 1.3%,
              #1b1c2a 77.11%);

          &:nth-child(2n) {
            background: linear-gradient(269deg,
                rgba(86, 151, 238, 0.52) 1.3%,
                #1b1c2a 77.11%);
          }

          &:nth-child(3n) {
            background: linear-gradient(269deg,
                rgba(238, 122, 86, 0.52) 1.3%,
                #1b1c2a 77.11%);
          }

          &:nth-child(4n) {
            background: linear-gradient(269deg,
                rgba(238, 168, 86, 0.52) 1.3%,
                #1b1c2a 77.11%);
          }

          .sub_menu_2_ss_icon {
            width: 88px;
            height: 88px;
            flex-shrink: 0;
            margin-right: 10px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;

            .sub_menu_2_ss_creater {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 33px;
              background: rgba(0, 0, 0, 0.72);
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: #fff;
            }
          }

          .sub_menu_2_ss_content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            color: #afb6bd;
            font-size: 12px;

            .sub_menu_2_ss_title {
              color: #fff;
              font-size: 20px;
            }

            .sub_menu_2_ss_info {
              display: flex;
              align-items: center;

              .sub_menu_2_ss_text {
                margin-left: 8px;
              }
            }
          }
        }

        .sub_menu_2_ssed {
          background: linear-gradient(270deg, #1c99ff 0%, #9c1fff 100%),
            linear-gradient(269deg,
              rgba(162, 86, 238, 0.52) 1.3%,
              rgba(0, 2, 35, 0) 77.11%) !important;

          .sub_menu_2_ss_content {
            color: #fff;
          }
        }

        .sub_menu_2_item {
          width: 90px;
          cursor: pointer;

          .sub_menu_2_box {
            border-radius: 6px;
            background: rgba(62, 87, 151, 0.21);
            width: 90px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;

            .sub_menu_2_img {
              width: 70%;
            }
          }

          .sub_menu_2_name {
            font-size: 14px;
            color: #fff;
            text-align: center;
            margin: 13px 0;
          }
        }
      }
    }

    .sub_menu_3 {
      width: 720px;
      padding: 0 20px 20px 20px;
      overflow-x: hidden;

      .sub_menu_3_ss {
        padding: 40px 0;

        .sub_menu_3_ss_title {
          color: rgba(255, 255, 255, 0.6);
          font-size: 18px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 16px;

          .sub_menu_3_title_icon {
            width: 22px;
            height: 22px;
            margin-right: 8px;
          }
        }

        .sub_menu_3_ss_block {
          margin-bottom: 24px;
          background-color: #060716;
          border-radius: 12px;
          padding: 16px;
          color: #a1a2b6;
          font-size: 16px;
          font-weight: 400;
        }

        .sub_menu_3_ss_btn {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 12px;
          background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
          box-shadow: 0.5px 0.5px 1px 0px #9b9eff inset;
          color: #fff;
          text-align: center;
          font-size: 16px;
          width: 372px;
          height: 46px;
          margin: 20px auto 0 auto;
        }
      }

      .sub_menu_3_item {
        .sub_menu_3_title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 30px;
          padding-bottom: 1px;

          .sub_menu_3_title_icon {
            height: 18px;
            width: auto;
          }

          .sub_menu_3_subtitle {
            color: rgba(255, 255, 255, 0.6);
            margin-left: 8px;
            font-size: 18px;
          }

          .sub_menu_3_btn {
            margin-left: 6px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 0.3px 0.3px 0.6px 0px #4b4a6e inset;
            color: #fff;
            font-size: 13px;
            min-width: 24px;
            padding: 0 9px;
            background-color: #282747;
            cursor: pointer;
          }
        }

        .sub_menu_3_list {
          display: flex;
          align-items: stretch;
          justify-content: flex-start;
          align-content: flex-start;

        }

        .sub_menu_3_list2 {
          flex-wrap: wrap;
          flex: 1;
          overflow-y: auto;

          .sub_menu_3_it {
            &:nth-child(6n) {
              margin-right: 0;
            }
          }

          .sub_menu_3_jl {
            width: 326px;
            height: 110px;
            border-radius: 16px;
            background: linear-gradient(269deg,
                rgba(162, 86, 238, 0.52) 1.3%,
                #1b1c2a 77.11%);
            margin-bottom: 8px;
            margin-right: 12px;
            overflow: hidden;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:nth-child(2n) {
              margin-right: 0;
              background: linear-gradient(269deg,
                  rgba(86, 151, 238, 0.52) 1.3%,
                  #1b1c2a 77.11%);
            }

            &:nth-child(3n) {
              background: linear-gradient(269deg,
                  rgba(238, 122, 86, 0.52) 1.3%,
                  #1b1c2a 77.11%);
            }

            &:nth-child(4n) {
              background: linear-gradient(269deg,
                  rgba(238, 168, 86, 0.52) 1.3%,
                  #1b1c2a 77.11%);
            }

            .sub_menu_3_jl_icon {
              width: 80px;
              height: 80px;
              margin-right: 12px;
            }

            .sub_menu_3_jl_content {
              display: flex;
              flex: 1;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;

              .sub_menu_3_jl_title {
                font-size: 20px;
                color: #fff;
                margin-bottom: 12px;
              }

              .sub_menu_3_jl_infos {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #afb6bd;
                font-size: 14px;

                .sub_menu_3_jl_info {
                  display: flex;
                  align-items: center;

                  .sub_menu_3_jl_text {
                    margin-left: 4px;
                  }

                  .sub_menu_3_jl_ticon {
                    font-size: 20px;
                  }
                }
              }
            }
          }
        }
      }

      .sub_menu_3_in {
        width: 714px;
        height: 100%;
        position: relative;

        .sub_menu_3_inbtn {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 40px;
          width: 372px;
          height: 46px;
          border-radius: 12px;
          background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
          box-shadow: 0.5px 0.5px 1px 0px #9b9eff inset;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
  }

  .menu_wrap_list {
    .menu_wrap_list_ban {
      background: none;
    }
  }
}
</style>
